import { Avatar, Col, Row, Typography } from 'antd'
import React from 'react'

function SellerDetail({ detail }) {
  console.log(detail)
  return (
    <>
      <Row>
        <Col span={2}>
          <Avatar
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            size={64}
          />
        </Col>
        <Col span={6} className="base-info">
          <span>
            商家账号：<span>User1882321</span>
          </span>
          <span>
            商家名称：<span>{detail.businessName}</span>
          </span>
        </Col>
        <Col span={7} className="base-info">
          <span>
            业务联系人：<span>{detail.businessHeadName}</span>
          </span>
          <span>
            联系方式：<span>{detail.businessHeadPhone}</span>
          </span>
        </Col>
        <Col span={8} className="base-info">
          <span>
            公司地址：<span>{detail.companyAddress}</span>
          </span>
          <span>
            经营范围：<span>餐饮</span>
          </span>
        </Col>
      </Row>
      <Typography.Title className="base-info-bg" level={5}>
        店铺信息
      </Typography.Title>
      <Row>
        <Col span={5} className="base-info">
          <span>
            店铺数量：<span>500</span>
          </span>
          <span>
            活跃度：<span>高</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            覆盖地区：<span>北京、广州、上海...</span>
          </span>
          <span>
            竞争力：<span>高</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            推广数量：<span>20万+</span>
          </span>
          <span>
            店铺类型：<span>饭店、原科供应商</span>
          </span>
        </Col>
        <Col span={7} className="base-info">
          <span>
            用户评分：<span>4.8分</span>
          </span>
          <span>
            热门产品：<span>情侣套餐、火锅底料 </span>
          </span>
        </Col>
      </Row>
      <Typography.Title className="base-info-bg" level={5}>
        互动信息
      </Typography.Title>
      <Row>
        <Col span={5} className="base-info">
          <span>
            文章发布数：<span>300</span>
          </span>
          <span>
            商家点赞数：<span>2000W+</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            商家关注数：<span>500W+</span>
          </span>
          <span>
            商家转发数：<span>50W+</span>
          </span>
        </Col>
        <Col span={7} className="base-info">
          <span>
            商家收藏数：<span>10万+</span>
          </span>
          <span>
            <span style={{ color: '#FFF' }}>1</span>
          </span>
        </Col>
      </Row>
      <Typography.Title className="base-info-bg" level={5}>
        营销活动
      </Typography.Title>
      <Row style={{ marginBottom: 20 }}>
        <Col span={5} className="base-info">
          <span>
            历史活动总数量：<span>590个</span>
          </span>
          <span>
            转化率：<span>10%</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            进行中活动数量：<span>10个</span>
          </span>
          <span>
            活动投入产出比：<span>0.78</span>
          </span>
        </Col>
        <Col span={6} className="base-info">
          <span>
            活动参与总人数：<span>100万人</span>
          </span>
          <span>
            <span style={{ color: '#FFF' }}>1</span>
          </span>
        </Col>
        <Col span={7} className="base-info">
          <span>
            点击/参与：<span>50%/30%</span>
          </span>
          <span>
            <span style={{ color: '#FFF' }}>1 </span>
          </span>
        </Col>
      </Row>
    </>
  )
}

export default SellerDetail
